<!DOCTYPE html>
<html>

<head lang="en">
	<meta charset="UTF-8">
	<title>排序</title>
	<!--<link href="index.css" rel="stylesheet" type="text/css"/> -->
	<style type="text/css">
		.container {
			position: relative;
			width: 800px;
			margin: 0 auto;
		}

		.control {
			margin-bottom: 20px;
		}

		.circle {
			margin: 0 auto;
			width: 50px;
			height: 50px;
		}

		input[type="number"] {
			width: 60px;
		}

		/* 
		rect:hover{
		    fill: #4169E1;
		} */
	</style>
</head>

<body>
	<div class="container">
		<div class="control">
			数组长度:
			<input type="number" id="number">
			<input type="button" name="click" value="随机生成数组" id="getArr">
			<select id="order">
				<option>升序</option>
				<option>降序</option>
			</select>
			<select id="select">
				<option>冒泡排序</option>
				<option>直接插入排序</option>
				<option>希尔排序</option>
				<option>快速排序</option>
				<option>选择排序</option>
				<option>堆排序</option>
				<option>归并排序</option>
				<option>桶排序</option>
				<option>基数排序</option>
			</select>
			动画时间间隔(ms):
			<input type="number" value="1000" id="deley">
			<input type="button" name="click" value="开始排序" id="button">
		</div>
		<svg id="svg" width="800" height="500"></svg>
	</div>
</body>
<script src="./js/index.js"></script>

</html>